<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Animation</title>
    <script src="../dist/quark-renderer.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        html, body{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="main" width="800" height="600"></canvas>
    <script type="text/javascript">
        let main = document.getElementById('main');
        let ctx=main.getContext("2d");
        let qr = QuarkRenderer.init(ctx,{width:800,height:600});
        
        let circle1 = new QuarkRenderer.Circle({
            shape: {
                cx: 20,
                cy: 20,
                r: 30
            },
            style: {
                fill: 'blue'
            },
            draggable: true
        });

        let circle2 = new QuarkRenderer.Circle({
            shape: {
                cx: 60,
                cy: 60,
                r: 30
            },
            style: {
                fill: 'blue'
            },
            draggable: true
        });

        circle1.on('mouseover', function () {
            qr.host.style.cursor = 'move';
        });
        circle1.on('mouseout', function () {
            qr.host.style.cursor = 'default';
        });
        circle1.on('keydown', function (event) {
            console.log('keydown');
            console.log(event);
        });
        circle1.on('keyup', function (event) {
            console.log('keyup');
            console.log(event);
        });
        circle1.on('keypress', function (event) {
            console.log('keypress');
            console.log(event);
        });

        // qr.on("pagekeydown",function(event){
        //     console.log("qr pagekeydown...");
        // });

        qr.add(circle1);
        qr.add(circle2);
    </script>
</body>
</html>